<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="https://unpkg.com/vue@next"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.3.4/gsap.min.js"></script>
  <style>
  </style>
</head>
<body>
  <div id="app">
    <input type="text" v-model="query">
    <transition-group
      name="staggered-fade"
      tag="ul"
      :css="false"
      @before-enter="beforeEnter"
      @enter="enter"
      @leave="leave"
    >
      <li
        v-for="(item, index) in computedList"
        :key="item.msg"
        :data-index="index"
      >
        {{ item.msg }}
      </li>
    </transition-group>
  </div>

  <script>
    const app = Vue.createApp({
      setup() {
        let query = Vue.ref('')
        let list = Vue.reactive([
          { msg: 'Bruce Lee' },
          { msg: 'Jackie Chan' },
          { msg: 'Chuck Norris' },
          { msg: 'Jet Li' },
          { msg: 'Kung Fury' }
        ])
        const computedList = Vue.computed(() => {
          return list.filter(item => {
            return item.msg.toLowerCase().indexOf(query.value.toLowerCase()) !== -1
          })
        })
        return {
          query,
          list,
          computedList
        }
      },
      methods: {
        beforeEnter(el) {
          el.style.opacity = 0
          el.style.height = 0
        },
        enter(el, done) {
          gsap.to(el, {
            opacity: 1,
            height: '1.6em',
            delay: el.dataset.index * 0.15,
            onComplete: done
          })
        },
        leave(el, done) {
          gsap.to(el, {
            opacity: 0,
            height: 0,
            delay: el.dataset.index * 0.15,
            onComplete: done
          })
        }
      }
    })

    app.mount('#app')
  </script>
</body>
</html>